<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购票</title>
    <link rel="stylesheet" href="./ticketBuying.css">
    <link rel="stylesheet" href="../loginPages/loginPages-icon/iconfont.css">
    <link rel="stylesheet" href="./ticketBuying-icon/iconfont.css">
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            /* background-color: #2D1B41; */
            background-image: url(../imgs/666.png);
            /* overflow: hidden; */
        }
    </style>

</head>

<body>
    <div class="nav">
        <div class="logo">
            <img src="../imgs/图层 1@2x.png" alt="">
        </div>
        <div class="shortcut">
            <li id="main-page-btn"><a href="JavaScript:;">首页</a></li>
            <li id="song-page-btn"><a href="JavaScript:;">歌曲</a></li>
            <li id="but-tic-btn" class="checked"><a href="JavaScript:;">购票</a></li>
            <li id="my-btn"><a href="JavaScript:;"><i class="iconfont">&#xe604;</i>登录/注册</a></li>
        </div>
    </div>
    <section>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </section>
    <div class="main">
        <div class="main-title">
            <p>BOOK YOUR</p>
            <p>TICKETS FOR <span>CONCERT</span></p>
            <div class="img">
                <img src="../imgs/图层5@2x.png" alt="">
            </div>
        </div>
        <div class="search">
            <div class="innerbox">
                <i class="iconfont">&#xe67e;</i>
                <input type="text" value="摩天轮世界巡回演唱会">
            </div>
            <div class="background-img">
                <img src="../imgs/0.png" alt="">
            </div>
            <div class="details">
                <div class="left">
                    <div class="radius">
                        <i class="iconfont"></i>
                    </div>
                    <a href="JavaScript:;">城市</a>
                    <a href="JavaScript:;">北京</a>
                    <i class="iconfont">&#xe654;</i>
                </div>
                <div class="middle">
                    <div class="radius">
                        <i class="iconfont"></i>
                    </div>
                    <a href="JavaScript:;">时间</a>
                    <a href="JavaScript:;">2022/5/7</a>
                    <i class="iconfont">&#xe654;</i>
                </div>
                <div class="right">
                    <div class="radius">
                        <i class="iconfont"></i>
                    </div>
                    <a href="JavaScript:;">地点</a>
                    <a href="JavaScript:;">北京体育馆</a>
                    <i class="iconfont">&#xe654;</i>
                </div>
            </div>
        </div>
        <div class="more-details">
            <!-- <input type="submit" value="近期演唱会"> -->
            <p>近期演唱会</p>
        </div>
        <div class="center">
            <div class="left-box">
                <div class="pc">
                    <img src="../imgs/5.jpg" alt="">
                    <div class="news">
                        <h1>【北京】五一·一起来听歌Super Star 2003青春纪念册演唱会...</h1>
                        <p>￥ 180.00起</p>
                    </div>
                </div>
            </div>
            <div class="right-box">
                <div class="top-box">
                    <div class="top-left">
                        <div class="pc">
                            <img src="../imgs/7.jpg" alt="">
                            <div class="news">
                                <p>【北京】五一狂欢 电音节 · 北...</p>
                                <p>时间：2022.05.01 -06.03</p>
                                <p>场馆：北京市 | 北京 HEAVEN CLU...</p>
                                <h1>￥ 180.00起</h1>
                            </div>
                        </div>
                    </div>
                    <div class="top-right">
                        <div class="pc">
                            <img src="../imgs/8.jpg" alt="">
                            <div class="news">
                                <p>【北京】五一狂欢 电音节 · 北...</p>
                                <p>时间：2022.05.01 -06.03</p>
                                <p>场馆：北京市 | 北京 HEAVEN CLU...</p>
                                <h1>￥ 180.00起</h1>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="bottom-box">
                    <div class="bottom-left">
                        <div class="pc">
                            <img src="../imgs/9.jpg" alt="">
                            <div class="news">
                                <p>【北京】五一狂欢 电音节 · 北...</p>
                                <p>时间：2022.05.01 -06.03</p>
                                <p>场馆：北京市 | 北京 HEAVEN CLU...</p>
                                <h1>￥ 180.00起</h1>
                            </div>
                        </div>
                    </div>
                    <div class="bottom-right">
                        <div class="pc">
                            <img src="../imgs/10.jpg" alt="">
                            <div class="news">
                                <p>【北京】五一狂欢 电音节 · 北...</p>
                                <p>时间：2022.05.01 -06.03</p>
                                <p>场馆：北京市 | 北京 HEAVEN CLU...</p>
                                <h1>￥ 180.00起</h1>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        var text = document.querySelector("input")
        text.onfocus = function () {
            if (this.value === "摩天轮世界巡回演唱会") {
                this.value = ""
            }
        }
        text.onblur = function () {
            if (this.value === "") {
                this.value = "摩天轮世界巡回演唱会"
            }
        }

        /**
 * 相关的页面跳转
 */
        var mpBtn = document.getElementById('main-page-btn');
        var spBtn = document.getElementById('song-page-btn');
        var btBtn = document.getElementById('but-tic-btn');
        var myBtn = document.getElementById('my-btn');

        mpBtn.onclick = function () {
            window.location.href = "../mainPage/mainPage.html"
        }

        spBtn.onclick = function () {
            window.location.href = "../songsPage/songsPage.html";
        }

        btBtn.onclick = function () {
            window.location.href = "../ticketBuying/ticketBuying.html"
        }

        myBtn.onclick = function () {
            window.location.href = "../loginPages/loginPages.html"
        }
    </script>
</body>

</html>